<!-- 供应商列表 -->
<template>
  <div class="app-container">
    <el-form :ref="filterForm" :inline="true" :model="filterForm" size="small" class="form-inline">
      <el-form-item>
        <el-input
          v-model="filterForm.supplierName"
          class="wid220"
          clearable
          placeholder="供应商名称"
          @clear="handleQuery"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-input
          v-model="filterForm.storeName"
          class="wid220"
          clearable
          placeholder="门店名称"
          @clear="handleQuery"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-select v-model="typeTime" class="wid120" placeholder="时间类型">
          <el-option label="创建时间" :value="0"></el-option>
          <el-option label="发货时间" :value="1"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="" prop="dateRange">
        <el-date-picker
          v-model="filterForm.dateRange"
          class="wid330"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="yyyy-MM-dd"
          style="width: 100%"
        />
      </el-form-item>
      <el-form-item>
        <el-input
          v-model="filterForm.purchaseId"
          class="wid220"
          clearable
          placeholder="采购单编号"
          @clear="handleQuery"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-select v-model="filterForm.purchaseStatus" class="wid220" placeholder="采购单状态">
          <el-option label="全部" :value="null"></el-option>
          <el-option label="待接单" :value="'待接单'"></el-option>
          <el-option label="待付款" :value="'待付款'"></el-option>
          <el-option label="已发货" :value="'已发货'"></el-option>
          <el-option label="部分发货" :value="'部分发货'"></el-option>
          <el-option label="已完成" :value="'已完成'"></el-option>
          <el-option label="作废" :value="'作废'"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button
          class="wid78"
          style="background: #005aa0"
          type="primary"
          icon="el-icon-search"
          @click="handleSearch"
        >查询</el-button>
        <el-button class="wid78" plain icon="el-icon-refresh-right" @click="reset">重置</el-button>
      </el-form-item>
    </el-form>
    <public-table :table-head="tableHead" :table-data="tableData" :show-index="showIndex">
      <template slot="logisticsInfo" slot-scope="slotProps">
        <el-select v-model="slotProps.data.logistics" size="small" placeholder="请选择">
          <el-option
            v-for="item in slotProps.data.logisticsVOList"
            :key="item.primaryId"
            :label="item.logisticsCompany + item.waybillNumber"
            :value="item.primaryId"
          >
          </el-option>
        </el-select>
      </template>
      <template slot="handle" slot-scope="slotProps">
        <el-button type="text" @click="handleEdit(slotProps.data)">详情</el-button>
        <el-button
          v-if="slotProps.data.logisticsVOList.length !== 0"
          type="text"
          @click="handleInfo(slotProps.data)"
        >物流轨迹</el-button>
        <el-button
          v-if="slotProps.data.retreatStatus !== null"
          type="text"
          style="color: #faad14"
          @click="returnGoods(slotProps.data)"
        >退货申请</el-button>
        <el-button
          v-if="false"
          type="text"
          style="color: #faad14"
          @click="exchangeGoods(slotProps.data)"
        >换货申请</el-button>
      </template>
    </public-table>
    <Pagination
      ref="myPagination"
      :sum-total="sumTotal"
      @handle-size="handlePageSize"
      @handle-current="handlePageCurrent"
    />
    <public-dialog
      :title="dialogTitle"
      :visible="returnedPurchaseView"
      :custom-class="'my-dialog'"
      @handle-cancel="returnedPurcancel"
      @after-close="afterClosedre"
    >
      <div v-if="showTypeHide == 1">
        <div>
          <span
            v-for="(item, index) in orderPurchaing"
            :key="index"
            class="name"
            style="width: 112px; margin-right: 0; padding-right: 0"
            :class="{ tabActive: index == tabsIndex }"
            @click="changeTabs(index, item.waybillNumber)"
          >
            {{ item.waybillNumber }}
          </span>
        </div>
        <div style="height: 250px; overflow-x: auto">
          <div style="float: left; width: 200px">
            <p>订单编号：{{ orderPurchange.data.number }}</p>
            <p v-for="item in orderPurchange.data.list" :key="item.time">
              {{ item.time }} : {{ item.status }}
            </p>
          </div>
          <div style="height: 250px; float: left; transform: scaleX(0.5, 0.5); margin-left: 20px">
            <el-steps direction="vertical" :active="activeNext">
              <el-step title="快递收件(揽件)">
                <i slot="icon" class="icon-comment"></i>
              </el-step>
              <el-step title="在途中">
                <i slot="icon" class="icon-comment"></i>
              </el-step>
              <el-step title="正在派件 ">
                <i slot="icon" class="icon-comment"></i>
              </el-step>
              <el-step title="已签收">
                <i slot="icon" class="icon-comment"></i>
              </el-step>
              <el-step title="派送失败">
                <i slot="icon" class="icon-comment"></i>
              </el-step>
              <el-step title="疑难件">
                <i slot="icon" class="icon-comment"></i>
              </el-step>
              <el-step title="退件签收">
                <i slot="icon" class="icon-comment"></i>
              </el-step>
            </el-steps>
          </div>
        </div>
      </div>
      <el-form v-if="showTypeHide == 2" :model="formDatas" size="small" label-width="">
        <el-form-item v-for="(item, index) in formDatas" :key="index">
          <span style="display: inline-block; width: 20px">{{ index + 1 }}.</span>商品名称：<el-input
            v-model="item.goodsName"
            disabled
            size="small"
            style="width: 55px"
            placeholder="商品名称"
          ></el-input>
          商品编码：<el-input
            v-model="item.goodsNo"
            disabled
            size="small"
            style="width: 55px"
            placeholder="商品编码"
          ></el-input>
          退货数量：<el-input
            v-model="item.goodsNum"
            size="small"
            type="number"
            style="width: 55px"
            placeholder="商品数量"
          ></el-input>
        </el-form-item>
      </el-form>
      <template v-if="showTypeHide == 2">
        <hr
          style="
            border: 0;
            height: 1px;
            background: rgba(0, 0, 0, 0.06);
            width: 480px;
            margin-left: -24px;
          "
        />
        <el-button
          size="small"
          style="position: relative; right: -270px; top: 10px"
          @click="returnedPurchase()"
        >同意退货</el-button>
        <el-button
          type="primary"
          size="small"
          style="position: relative; right: -270px; top: 10px"
          @click="refuseReturn"
        >拒绝退货</el-button>
      </template>
      <el-form v-if="false" :model="exformDatas" size="small">
        <el-form-item v-for="(item, index) in exformDatas.data" :key="index">
          <span style="display: inline-block; width: 20px">{{ index + 1 }}.</span>换货商品名称：<el-input
            v-model="item.orderId"
            style="width: 55px"
            placeholder="商品名称"
          ></el-input>
          商品编码：<el-input
            v-model="item.goodsNo"
            style="width: 55px"
            placeholder="商品编码"
          ></el-input>
          退货数量：<el-input
            v-model="item.goodsNum"
            type="number"
            style="width: 55px"
            placeholder="商品数量"
          ></el-input>
          <br />
          <span style="display: inline-block; width: 20px"></span>换入商品名称：<el-input
            v-model="item.orderId"
            :value="item.orderId"
            style="width: 55px"
            placeholder="商品名称"
          ></el-input>
          商品编码：<el-input
            v-model="item.goodsNo"
            :value="''"
            style="width: 55px"
            placeholder="商品编码"
          ></el-input>
          退货数量：<el-input
            v-model="item.goodsNum"
            :value="''"
            type="number"
            style="width: 55px"
            placeholder="商品数量"
          ></el-input>
        </el-form-item>
      </el-form>
      <template v-if="false" v-slot:footer>
        <el-button size="small" @click="returnedExchange">同意换货</el-button>
        <el-button type="primary" size="small" @click="refuseExchange">拒绝换货</el-button>
      </template>
    </public-dialog>
  </div>
</template>
<script>
import PublicTable from '@/components/Tables/PublicTable'
import Pagination from '@/components/Pagination'
import PublicDialog from '@/components/Dialog/PublicDialog'
import { Basic } from '@/api/base'

export default {
  components: { PublicTable, Pagination, PublicDialog },

  data() {
    return {
      dialogTitle: '',
      dialogClass: '',
      tabsIndex: 0,
      showIndex: false, // 表格序号
      returnedPurchaseView: false,
      orderPurchaing: [],
      outOrder: {},
      orderPurchange: {},
      exformDatas: {},
      formDatas: {},
      showTypeHide: '',
      tableHead: [
        { label: '采购单编号', value: 'purchaseId', width: 192 },
        { label: '商品金额', value: 'purchaseGoodsMoney', width: 140 },
        { label: '服务费用', value: 'serviceMoney', width: 140 },
        { label: '运费', value: 'freightMoney', width: 140 },
        { label: '应付金额', value: 'totalMoney', width: 140 },
        { label: '采购单状态', value: 'purchaseStatus', width: 140 },
        { label: '门店名称', value: 'storeName', width: 177 },
        { label: '供应商名称', value: 'supplierName', width: 160 },
        { label: '创建时间', value: 'createTime', width: 178 },
        { label: '发货时间', value: 'deliverTime', width: 178 },
        { label: '门店备注', value: 'remark', width: 120 },
        { label: '供应商备注', value: 'supplierRemark', width: 120 },
        {
          label: '物流信息',
          value: 'logisticsVOList',
          type: 'slot',
          slotName: 'logisticsInfo',
          width: 230
        },
        { label: '操作', type: 'slot', slotName: 'handle', width: 220 }
      ],
      tableData: [],
      // 分页
      sumTotal: 0,
      currentPage: 1,
      pageSize: 10,
      typeTime: 0,
      filterForm: {},
      activeNext: 2,
      value: '111'
    }
  },
  mounted() {
    this.getTableData()
  },
  methods: {
    // 查询
    handleQuery() {
      const vm = this
      vm.currentPage = 1
      vm.$refs.myPagination.currentPage = 1
      vm.getTableData()
    },
    // 获取列表数据
    getTableData() {
      const vm = this
      const params = {
        supplierName: vm.filterForm.supplierName,
        storeName: vm.filterForm.storeName,
        purchaseId: vm.filterForm.purchaseId,
        purchaseStatus: vm.filterForm.purchaseStatus
      }
      if (vm.filterForm.dateRange && vm.filterForm.dateRange.length) {
        if (vm.typeTime === 0) {
          params.createStartTime = vm.filterForm.dateRange[0]
          params.createEndTime = vm.filterForm.dateRange[1]
        } else {
          params.deliverStartTime = vm.filterForm.dateRange[0]
          params.deliverEndTime = vm.filterForm.dateRange[1]
        }
      }
      params.pageNum = vm.currentPage
      params.pageSize = vm.pageSize
      Basic.general('purchase/selectListPage', params).then(res => {
        const { data } = res
        const { total = 0, records = [] } = data
        vm.sumTotal = total
        records.forEach(t => {
          const arr = t.logisticsVOList
          if (arr.length) {
            t.logistics = arr[0].primaryId
          } else {
            t.logistics = ''
          }
        })
        vm.tableData = records
      })
    },
    // 重置
    reset() {
      const vm = this
      vm.filterForm.supplierName = ''
      vm.filterForm.storeName = ''
      vm.filterForm.status = null
      vm.filterForm.dateRange = ''
      vm.filterForm.purchaseId = ''
      vm.typeTime = 0
      vm.filterForm.purchaseStatus = null
      vm.handleQuery()
    },
    // 详情
    handleEdit(data) {
      this.$router.push({
        path: 'purchasing-details',
        query: {
          purchaseId: data.purchaseId
        }
      })
    },
    // 物流轨迹
    getFoe(params) {
      Basic.general('purchase/getLogisticsTrack', params).then(res => {
        const s = JSON.parse(res.data.list)
        res.data.list = s
        this.orderPurchange = res
        this.activeNext = res.data.deliverystatus
      })
    },
    changeTabs(i, v) {
      this.tabsIndex = i
      this.getFoe({ waybillNumber: v })
    },
    exchangeGoods(d) {
      // 换货
      const vm = this
      vm.dialogTitle = '申请换货'
      this.showTypeHide = 3
      vm.dialogClass = 'my-dialog'
      this.returnedPurchaseView = true
      Basic.general('order/goods/list', { orderId: 'PTDD1397396315054411777' }).then(res => {
        if (res.code === 200) {
          vm.exformDatas = res.data
        }
      })
    },
    returnGoods(d) {
      // 申请退货
      this.outOrder = d
      this.dialogTitle = '申请退货'
      this.showTypeHide = 2
      this.dialogClass = 'my-dialog2'
      this.returnedPurchaseView = true
      const vm = this
      Basic.general('purchase/detail/goods/list', { purchaseId: d.purchaseId }).then(res => {
        if (res.code === 200) {
          vm.formDatas = res.data
        }
      })
    },
    returnedPurcancel() {
      this.returnedPurchaseView = false
    },
    afterClosedre() {
      this.returnedPurchaseView = false
    },
    // 同意退货
    returnedPurchase() {
      this.returnedPurchaseView = false
      const params = this.formDatas
      const paramsQuery = {
        purchaseId: this.outOrder.purchaseId,
        remark: this.outOrder.remark,
        returnDetail: []
      }
      params.forEach(i => {
        const obj = {
          goodsName: i.goodsName,
          skuId: i.skuId,
          amount: i.goodsNum
        }
        paramsQuery.returnDetail.push(obj)
      })
      Basic.normal('purchase/createReturnOrder', paramsQuery).then(res => {})
    },
    // 拒绝退货
    refuseReturn() {
      this.returnedPurchaseView = false
    },
    // 同意换货
    returnedExchange() {
      this.returnedPurchaseView = false
      const params = this.exformDatas
      Basic.save('oods/list', params).then(res => {
        if (res.code === 200) {
          this.orderDetails = res.data
        }
      })
    },
    // 拒绝换货
    refuseExchange() {
      this.returnedPurchaseView = false
    },
    // 物流轨迹
    handleInfo(data) {
      const vm = this
      vm.dialogTitle = '物流轨迹'
      vm.showTypeHide = 1
      vm.returnedPurchaseView = true
      vm.orderPurchaing = data.logisticsVOList
      vm.getFoe({ waybillNumber: data.logisticsVOList[0].waybillNumber })
    },
    // 分页
    handlePageSize(val) {
      this.pageSize = val
      this.getTableData()
    },
    handlePageCurrent(val) {
      this.currentPage = val
      this.getTableData()
    },
    async handleSearch() {
      const vm = this
      vm.currentPage = 1
      vm.$refs.myPagination.currentPage = 1
      let params = JSON.parse(JSON.stringify(vm.filterForm))
      const { dateRange = [] } = params
      if (dateRange.length) {
        params.startTime = dateRange[0]
        params.endTime = dateRange[1]
      }
      params = vm.initParams(params)
      vm.getTableData()
    },
    // afterClosed() {
    //   this.handleReset()
    // },
    // handleReset() {
    //   if(this.$refs['filterForm']){
    //     this.$refs['filterForm'].resetFields()
    //   }
    // },
    initParams(params) {
      if (JSON.stringify(params) !== '{}') {
        const obj = JSON.parse(JSON.stringify(params))
        const data = {}
        for (const key in obj) {
          if (obj[key] !== '' && obj[key] !== undefined) {
            data[key] = obj[key]
          }
        }
        return data
      } else {
        return {}
      }
    }
  }
}
</script>
<style lang='scss' scoped>
.app-container /deep/ .my-dialog {
  width: 480px;
}
.wid220 {
  width: 220px !important;
  font: size 14px !important;
}
.wid330 {
  width: 330px !important;
  font: size 14px !important;
}
.wid120 {
  width: 120px !important;
  font: size 14px !important;
}
.wid78 {
  width: 78px;
  font-size: 14px !important;
}
.name {
  display: inline-block;
  width: 100px;
}
.tabActive {
  color: #1890ff;
  border-bottom: 2px solid #1890ff;
}
</style>
